/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { FormLabel, FormInput, List, ListItem } from 'react-native-elements'
import { BOOKS } from './mock-books'


type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      selectedBook:{
        id:'',
        name:''
      }
    };
  }

  onInputChange(val) {
    const index = BOOKS.findIndex((item)=>item.id == this.state.selectedBook.id)
    BOOKS[index] = {id:this.state.selectedBook.id,name:val};
    this.setState({
      selectedBook: {id:this.state.selectedBook.id,name:val}
    });
  }

  onListItemPressed(item){
    this.setState({selectedBook:item});
  }
  render() {
    let test = 1;
    return (
      <View style={styles.container}>
        <List style={styles.list}>
          {
            BOOKS.map((l) => (
              <ListItem
                key={l.id}
                title={l.name}
                onPress={this.onListItemPressed.bind(this,l)}
              />
            ))
          }
        </List>
        <Text style={styles.welcome}>图书：{this.state.selectedBook.name.toUpperCase()}</Text>
        <FormLabel>图书ID：{this.state.selectedBook.id}</FormLabel>
        <FormInput value={this.state.selectedBook.name} onChangeText={this.onInputChange.bind(this)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  list:{
    marginBottom: 20
  }
});
